import React from 'react'
import Link from 'gatsby-link'
import {
    BlogIcon,
    CommunityIcon,
    DocsIcon,
    TutorialIcon,
  } from "../assets/images/mobile/mobile-nav-icons"

const MobileNavItem = ({ linkTo, label, icon }) => (
    <Link
      to={linkTo}
      id="mobileNavItem"
    >
      <img src={icon} style={{ height: 32, display: `block`, margin: `0 auto` }} />
      <div>{label}</div>
    </Link>
  )
const MobileNavigation = () => (
    <div
    id="mobileNavigation"
  >
    <MobileNavItem linkTo="/docs/" label="Docs" icon={DocsIcon} />
    <MobileNavItem linkTo="/tutorial/" label="Tutorial" icon={TutorialIcon} />
    <MobileNavItem
      linkTo="/community/"
      label="Community"
      icon={CommunityIcon}
    />
    <MobileNavItem linkTo="/blog/" label="Blog" icon={BlogIcon} />
  </div>
)

export default MobileNavigation